{% extends "kjs/rainbow/layouts/main.html" %}

{% block common_css %}
    {{ block.super }}
    <style type="text/css">
        div#top_right {
            background-color:white;
            width:280px;
            padding:20px;
            margin:10px 5px;
            border-radius:2px;
        }
        div#top_right img {
            width:86px;
            height:86px;
            float:left;
            margin-right:20px;
        }
        div#rainbow_album_info_widget {
            margin:10px auto;
            padding:10px 20px;
            border-bottom:5px double #dcdcdc;
            background:url("{{ STATIC_URL }}commons/background/8f1f1_background.png");
        }
        div#rainbow_album_widget {
            min-height:600px;
        }

        div.rainbowPhotoFrameWidget {
            border-radius:2px;
        }
        div.rainbowPhotoFrameWidget img {
            display:block;
        }
    </style>
{% endblock %}

{% block rainbow_body %}
    <div id="rainbow_album_info_widget">
        {% if album_instance.profile.is_auth_owner %}
            <a href="/rainbow/photoframe/save/to/album/{{ album_instance.id }}">
                <div style="float:right;">
                    <label>添加相片</label>
                </div>
            </a>
        {% endif %}
        <div style="color:white;font-size:28px;">
            <a href="/rainbow/album/{{ album_instance.id }}/of/user/{{ album_instance.user.id }}/show">
                <label>
                    {{ album_instance.name }}
                </label>
            </a>
            <label>
                ({{ album_instance.profile.album_photos.count }})
            </label>
        </div>
    </div>
    <div id="rainbow_album_widget">
        <div id="top_right" class="rainbowPhotoFramePositionWidget">
            <label>创建者</label>
            <div style="min-height:86px;padding:10px 0;">
                <img src="/static/rainbow/images/0/default.jpeg"/>
                {{ album_instance.user.profile.nickname.value }}
            </div>
            <label>其他相册</label>
            <div id="otherAlbumListWidget"></div>
            <script type="text/javascript">
                $(document).ready(function(){
                    $("div#otherAlbumListWidget").load("/rainbow/album/of/user/{{ album_instance.user.id }}/list?format=list", function(){
                        $(this).find("li#rainbow_album_" + "{{ album_instance.id }}").hide();
                    });
                });
            </script>
        </div>
    </div>
{% endblock %}

{% block common_script %}
    {{ block.super }}
    <script type="text/javascript">
        var jquery = $, jQuery;
        (function($){
            $.fn.extend({
                _rainbowWidgetGetLinesWidth:function(){
                    var widget = $(this);
                    var lineWidgets = widget.find("div.rainbowPhotoFrameLineWidget");
                    return $(lineWidgets.get(0)).width() * lineWidgets.size();
                },
                _rainbowWidgetGetLastLine:function(){
                    var widget = $(this);
                    var lastLineWidget = null;
                    var lineWidgets = widget.find("div.rainbowPhotoFrameLineWidget");
                    if (lineWidgets.size() > 0) {
                        lastLineWidget = $(lineWidgets.get(lineWidgets.size() - 1));
                    }
                    return lastLineWidget;
                },
                _rainbowWidgetGetMinLine:function(){
                    var widget = $(this);
                    var minLineWidget = null;
                    var lineWidgets = widget.find("div.rainbowPhotoFrameLineWidget");
                    if (lineWidgets.size() > 0) {
                        lineWidgets.sort(function(oneLine, anotherLine){
                            return $(oneLine).height() - $(anotherLine).height();
                        });
                        minLineWidget = $(lineWidgets.get(0));
                    }
                    return minLineWidget;
                },
                _rainbowWidgetGetMaxLine:function(){
                    var widget = $(this);
                    return $(widget.find("div.rainbowPhotoFrameLineWidget").sort(function(oneLine, anotherLine){
                        return $(anotherLine).height() - $(oneLine).height();
                    }).get(0));
                },
                _rainbowWidgetAddPhoto:function(options){
                    var defaults = {};
                    var opts = $.extend(defaults, options);
                    var widget = $(this);
                    var minLineWidget = widget.rainbowWidget("getMinLine");
                    if (!$.isEmptyObject(minLineWidget)) {
                        var photoWidget = $("<div/>");
                        photoWidget.addClass("rainbowPhotoFrameWidget");
                        minLineWidget.append(photoWidget);
                        photoWidget.css({
                            width:opts.photoFrameWidth,
                            margin:opts.photoFrameMargin + "px " + opts.photoFrameMargin/2 + "px",
                            padding:opts.photoFramePadding,
                            background:"white"
                        });
                        photoWidget.load(opts.photoPage + "?format=sample", function(){
                            var maxLineWidget = widget.rainbowWidget("getMaxLine");
                            widget.css({
                                height:maxLineWidget.height()
                            });
                        });
                    }
                },
                _rainbowWidgetInitial:function(options){
                    var defaults = {
                        widgetWidth:1024,
                        photoFrameWidth:300
                    };
                    var opts = $.extend(defaults, options);
                    var widget = $(this);
                    var photoFrameWidgets = widget.find("div.rainbowPhotoFrameWidget");
                    var photoFramePositionWidget = widget.find("div.rainbowPhotoFramePositionWidget");
                    var position = photoFramePositionWidget.attr("id");
                    //清空数据
                    widget.html("");
                    widget.css({
                        width:opts.widgetWidth
                    });
                    var photoFrameLineWidth = opts.photoFrameWidth + 2 * opts.photoFramePadding + opts.photoFrameMargin;
                    var lines = parseInt(widget.width() / photoFrameLineWidth);
                    var widgetPadding = (widget.width() - lines * photoFrameLineWidth) / 2;
                    var divTmp = $("<div/>");
                    for (var i=0; i<lines; i++) {
                        var lineWidget = divTmp.clone();
                        widget.append(lineWidget);
                        lineWidget.css({
                            width:photoFrameLineWidth,
                            position:"absolute",
                            "margin-left":widgetPadding + i * photoFrameLineWidth
                        });
                        lineWidget.append(divTmp.clone().addClass("rainbowPhotoFrameLineWidget"));
                    }
                    if (!$.isEmptyObject(position)) {
                        switch (position) {
                            case "top_right":
                                widget.rainbowWidget("getLastLine").append(photoFramePositionWidget);
                                break;
                            default:
                                break;
                        }
                    }
                    for (var j=0; j<photoFrameWidgets.size(); j++) {
                        var minLine = widget.rainbowWidget("getMinLine");
                        minLine.append($(photoFrameWidgets.get(j)));
                        widget.css({
                            height:widget.rainbowWidget("getMaxLine").height()
                        })
                    }
                },
                rainbowWidget:function(options){
                    var action = arguments[0];
                    switch(action) {
                        case "addPhoto":
                            return $(this)._rainbowWidgetAddPhoto(arguments[1]);
                            break;
                        case "initial":
                            return $(this)._rainbowWidgetInitial(arguments[1]);
                            break;
                        case "getMinLine":
                            return $(this)._rainbowWidgetGetMinLine();
                            break;
                        case "getMaxLine":
                            return $(this)._rainbowWidgetGetMaxLine();
                            break;
                        case "getLastLine":
                            return $(this)._rainbowWidgetGetLastLine();
                            break;
                        case "getLinesWidth":
                            return $(this)._rainbowWidgetGetLinesWidth();
                            break;
                        default:
                            return null;
                            break;
                    }
                }
            });
        })(jquery);

        $(document).ready(function(){
            var rainbowAlbumWidget = $("div#rainbow_album_widget");
            var rainbowAlbumInfoWidget = $("div#rainbow_album_info_widget");
            var photoFrameWidth = 300;
            var photoFramePadding = 10;
            var photoFrameMargin = 10;
            rainbowAlbumWidget.rainbowWidget("initial", {
                widgetWidth:$(document).width(),
                photoFrameWidth:photoFrameWidth,
                photoFramePadding:photoFramePadding,
                photoFrameMargin:photoFrameMargin
            });
            rainbowAlbumInfoWidget.css({
                width:rainbowAlbumWidget.rainbowWidget("getLinesWidth")
            });
            var photoFrameDataList = [
                {% for photo in photo_list %}
                    '/rainbow/photoframe/{{ photo.id }}/show'{% if forloop.counter != photo_list.count %},{% endif %}
                {% endfor %}
            ];

            var interval = window.setInterval(function(){
                var photoUrl = photoFrameDataList.pop();
                if (!$.isEmptyObject(photoUrl)) {
                    rainbowAlbumWidget.rainbowWidget("addPhoto", {
                        photoPage:photoUrl,
                        photoFrameWidth:photoFrameWidth,
                        photoFramePadding:photoFramePadding,
                        photoFrameMargin:photoFrameMargin
                    });
                } else {
                    window.clearInterval(interval);
                }
            }, 500);
            $(window).resize(function(){
                var w = $(this).width();
                if (w < 400) {
                    w = 400
                }
                rainbowAlbumWidget.rainbowWidget("initial", {
                    widgetWidth:w,
                    photoFrameWidth:photoFrameWidth,
                    photoFramePadding:photoFramePadding,
                    photoFrameMargin:photoFrameMargin
                });
                rainbowAlbumInfoWidget.css({
                    width:rainbowAlbumWidget.rainbowWidget("getLinesWidth")
                });
            });
        });
    </script>
{% endblock %}